<template>
	<view>
		<u-popup :show="shareShow" :closeOnClickOverlay="false" :closeable="true" :round="10" mode="center" bgColor="transparent" @close="close" @open="open">
			<view class="share_wrapper">				
				<view class="sharing-view-pic">
					<image class="canvas-box" :src="shareImage" mode="widthFix" >
					</image>
				</view>
				<template v-if="activityInfo">
					<l-painter ref="painter" isCanvasToTempFilePath @success="posterSuccess" @fail="fail"
						custom-style="position:absolute;left:-9999px;"
						:css="`width: 660rpx;padding-bottom: 25rpx;background-color: #ffffff;`">
						<l-painter-image :src="activityInfo.image_url" css="width:660rpx;height:500rpx;object-fit: cover;" />
						<l-painter-image css="position:absolute;top:15rpx;left:30rpx;width: 200rpx; height: 64rpx;"
							src="/static/images/BX/posterBg1.png"></l-painter-image>
						<l-painter-view>
							<l-painter-text
								css="color: #333; margin-bottom:20rpx;margin-left:35rpx; font-size: 32rpx;font-weight:700;padding-top:32rpx;box-sizing: border-box;"
								:text="activityInfo.title.length<=20?activityInfo.title:activityInfo.title.substr(0,20)+'...'"></l-painter-text>
						</l-painter-view>
						<l-painter-view css="box-sizing: border-box; background: #ffffff;">
							<l-painter-view v-for="(item,index) in shareText" :key="index">
								<l-painter-text
									css="position:relative:z-index:20;width:590px;line-clamp: 2; color: #6E6E6E; margin-bottom:15rpx;margin-left:35rpx; font-size: 26rpx;box-sizing: border-box;"
									:text="item"></l-painter-text>
							</l-painter-view>
							<l-painter-view css="position:relative:z-index:20;display:flex;justify-content: center;">
								<l-painter-view css="width:150rpx;margin-top:-25rpx;">
									<l-painter-image css="width: 150rpx; height: 150rpx;margin-top:30rpx;" :src="qrcodeUrl"></l-painter-image>
								</l-painter-view>
								<l-painter-view css="width: 400rpx;margin-top:40rpx;">
									<l-painter-text
										css="line-clamp: 2; color: #7D7D7D; margin-bottom:10rpx;margin-left:25rpx; font-size: 26rpx;box-sizing: border-box;"
										:text="'活动时间：'+activityInfo.acticity_s_time"></l-painter-text>
									<l-painter-text
										css="line-clamp: 2; color: #7D7D7D; margin-left:25rpx;font-size: 26rpx;box-sizing: border-box;"
										text="活动报名：识别二维码了解详情"></l-painter-text>
								</l-painter-view>
								<l-painter-image css="position:absolute;bottom:0rpx;right:20rpx;z-index:-1;width: 300rpx; height: 223rpx;"
									src="/static/images/BX/posterBg2.png"></l-painter-image>
							</l-painter-view>
						</l-painter-view>
					</l-painter>
				</template>
				
				
				<view class="shareView" >
					<image class="shareLogo" src="@/static/images/BX/share1.png" @click="wechatShare"></image>
					<view class="shareText" @click="wechatShare">海报分享</view>
				</view>
							
			</view>
		
		</u-popup>
		<!-- <view style="position: absolute;">
			<canvas canvas-id="myCanvas" :style="{width:750*scale+'px',height:1334*scale+'px'}" />
		</view> -->
	</view>
	
</template>

<script>
	let _that = null
	let ctx = null
	let scale = 0
	export default {
		data() {
			return {
				scale: 0,
				shareImage: '',
				shareShow: false,
				activityInfo: null,
				canvasShow: true,
				shareText: []
			}
		},
		created() {
			//
			_that = this


		},

		methods: {
			wechatShare(){
				
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: this.shareImage, //this.shareImage					
					// imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png", //this.shareImage
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});

				
			},
			posterSuccess(url){
				console.log(url)
				uni.hideLoading()
				this.shareImage = url
			},
			fail(e){
				console.log(e)
				
			},
			open() {
				this.shareShow = true
				// this.drawPoster()
			},
			close() {
				this.shareShow = false
				
			},
			shareDataFn(shareData, qrcodeUrl) {
				this.activityInfo = shareData
				this.qrcodeUrl = qrcodeUrl
				if(this.activityInfo.share_text){
					this.shareText = this.activityInfo.share_text.split('\n')
				}
				uni.showLoading({
					title: '生成中'
				})
				
			},
			//绘制分享海报
			// drawPoster() {
			// 	let _this = this
			// 	uni.showLoading({
			// 		title: '生成中...',
			// 		mask: true
			// 	})
			// 	ctx.setFillStyle("#ffffff")
			// 	ctx.fillRect(0, 0, 750 * scale, 1334 * scale)
			// 	uni.downloadFile({
			// 		url: _this.activityInfo.image_url,
			// 		success: function(res) {
						
			// 			if (res.statusCode === 200) {
			// 				ctx.drawImage(res.tempFilePath, 0, 0, 750 * scale, 170 * scale);


			// 				let configHeight = 160 * scale

			// 				//画地图的白色背景								
			// 				ctx.setFillStyle('rgba(255, 255, 255, 0.3)')
			// 				ctx.fillRect(42 * scale, 934 * scale + configHeight, 666 * scale, 195 * scale)
			// 				//矩形倒角
			// 				_that.roundRect(ctx, 42 * scale, 934 * scale + configHeight, 666 * scale, 195 * scale, 10 * scale)
			// 				//
			// 				let addMore = 20 * scale
			// 				ctx.setFontSize(33 * scale)
			// 				ctx.setFillStyle('#733701')
			// 				ctx.fillText(_this.activityInfo.title, 232 * scale, 978 * scale + addMore + configHeight)
			// 				ctx.setFontSize(28 * scale)
			// 				ctx.setFillStyle('#733701')
			// 				ctx.fillText(_this.activityInfo.share_text ? _this.activityInfo.share_text : '', 232 * scale, 1025 *
			// 					scale + addMore + configHeight)
			// 				ctx.setFontSize(28 * scale)
			// 				ctx.setFillStyle('#333333')
			// 				ctx.fillText('扫码查看我的名片', 232 * scale, 1067 * scale + addMore + configHeight)
			// 				//绘制二维码
			// 				// let qrWidth = 149 * scale
			// 				// ctx.drawImage(_that.qrPath, 518 * scale, 958 * scale + configHeight, qrWidth, qrWidth)
			// 				// ctx.restore()

			// 				ctx.draw(false, (() => {
			// 					setTimeout(() => {
			// 						_that.exportImage()
			// 						uni.hideLoading()
			// 					}, 1000)
			// 				}))

			// 			} else {
			// 				uni.showToast({
			// 					title: '错误',
			// 					duration: 2000,
			// 					icon: 'none'
			// 				})
			// 			}
			// 		}
			// 	})
			// },
			//导出图片
			// exportImage() {
			// 	uni.canvasToTempFilePath({
			// 		x: 0,
			// 		y: 0,
			// 		width: 750 * scale,
			// 		height: 1334 * scale,
			// 		destWidth: 750 * scale,
			// 		destHeight: 1334 * scale,
			// 		fileType: 'png',
			// 		canvasId: 'myCanvas',
			// 		success(res) {
			// 			_that.shareImage = res.tempFilePath
			// 			// _that.canvasShow = false						
			// 			// console.log(_that.shareImage, 'exportImagesuccess')
			// 		},
			// 		fail(f) {
			// 			console.error(f, 'exportImagefail')
			// 		}
			// 	}, this)
			// },
			/**
			 * 绘制圆角矩形
			 * @param {Object} ctx - canvas组件的绘图上下文
			 * @param {Number} x - 矩形的x坐标
			 * @param {Number} y - 矩形的y坐标
			 * @param {Number} w - 矩形的宽度
			 * @param {Number} h - 矩形的高度
			 * @param {Number} r - 矩形的圆角半径
			 * @param {String} [c = 'transparent'] - 矩形的填充色
			 */
			roundRect(ctx, x, y, w, h, r) {
				if (w < 2 * r) {
					r = w / 2;
				}
				if (h < 2 * r) {
					r = h / 2;
				}

				ctx.beginPath();

				ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
				ctx.moveTo(x + r, y);
				ctx.lineTo(x + w - r, y);
				ctx.lineTo(x + w, y + r);

				ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
				ctx.lineTo(x + w, y + h - r);
				ctx.lineTo(x + w - r, y + h);

				ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
				ctx.lineTo(x + r, y + h);
				ctx.lineTo(x, y + h - r);

				ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
				ctx.lineTo(x, y + r);
				ctx.lineTo(x + r, y);

				ctx.fill();
				ctx.closePath();
			}



		}
	}
</script>

<style lang="scss" scoped>
	.share_wrapper {

		.sharing-view-pic {
			width: 100%;
			text-align: center;
			.canvas-box {
				display: block;
				width: 620rpx;
				text-align: center;
				border-radius: 10rpx;				
			}
		}

		.shareView {
			margin-top: 10rpx;
			// background-color: transparent;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.shareLogo{
				width: 80rpx;
				height: 80rpx;
			}
			.shareText{
				color: white;
				font-size: 26rpx;
				padding-top: 10rpx;
			}
		}
	}
	/deep/ .u-icon__icon{
		color: white !important;
	}
</style>